<template>
  <div class="holdRateLayoutInfo">
    <el-row>
      <el-col :span="24">
        <dynForm
          :info-form="infoForm"
          :search-tags="searchTags"
          :select-list="selectList"
        >
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="doSearch"
          >
            {{ $t('search') }}</el-button>
        </dynForm>
      </el-col>
    </el-row>
    <el-card>
      <el-row>
        <el-table
          :data="tableData"
          :header-cell-style="{ background: '#F2F6FC', color: '#606266' }"
          style="width: 100%"
          stripe
          fit
          border
          tooltip-effect="dark"
        >
          <el-table-column
            :label="$t('riskLevel')"
            prop="riskLevel"
            width="100"
            align="center"
          />
          <el-table-column
            :label="$t('department')"
            prop="location"
            width="100"
            align="center"
          />
          <el-table-column
            :label="$t('statisticType')"
            align="center">
            <el-table-column
              :label="$t('customer')"
              prop="customer"
              align="center"
            />
            <el-table-column
              :label="$t('productName')"
              prop="productName"
              align="center"
            />
            <el-table-column
              :label="$t('packageType')"
              prop="packagingFormCode"
              align="center"
            />

            <el-table-column
              :label="$t('processNo')"
              prop="processFlow"
              align="center"
            />
            <el-table-column
              :label="$t('processSpecificationNumber')"
              prop="processSpecifictionNo"
              width="200"
              align="center"
            />
          </el-table-column>

          <el-table-column
            :label="$t('timeLimit')"
            prop="name"
            align="center"
          >
            <template v-if="tableData[0] && tableData[0].ratioAndCounts">
              <el-table-column
                v-for="(item, index) of tableData[0].ratioAndCounts"
                :key="index"
                :label="`近${item.days}天`"
                align="center"
              >
                <el-table-column
                  :label="$t('count')"
                  align="center"
                >
                  <template slot-scope="scope">
                    <el-link
                      :underline="false"
                      type="primary"
                      @click="jumpToDetail(scope.row, item.days)">
                      {{ item.count }}
                    </el-link>
                  </template>
                </el-table-column>
                <el-table-column
                  :label="$t('ratio')"
                  :show-overflow-tooltip="true"
                  align="center"
                >
                  <template slot-scope="scope">
                    <el-link
                      :underline="false"
                      type="primary"
                      @click="jumpToDetail(scope.row, item.days)">
                      {{ (item.ratio * 100).toFixed(2) + '%' }}
                    </el-link>
                  </template>
                </el-table-column>
              </el-table-column>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <pagination
        :page.sync="listQuery.page"
        :size.sync="listQuery.size"
        :total="total"
        @pagination="onChangePage"
      />
    </el-card>
  </div>
</template>
<script>
import { getHoldRatioList, getriskLevel } from '@/api/auto-analyze-warning/holdRate'
import { getPackageTypeList } from '@/api/auto-analyze-warning/SBLIndexSetting'

import { pickTime } from '@/utils/pickTime'
import mySetting from '@/mixins/mySetting'
export default {
  name: 'HoldRateLayoutInfo',
  mixins: [mySetting],
  data() {
    const searchTags = [
      { label: this.$t('riskLevel'), prop: 'riskRaito', tag: 'DynSelect' },
      { label: this.$t('customer'), prop: 'customer', tag: 'DynInput' },
      { label: this.$t('productName'), prop: 'productCode', tag: 'DynInput' },
      { label: this.$t('packageType'), prop: 'packagingFormCode', tag: 'DynSelect' }
    ]
    return {
      infoForm: {},
      selectList: {},
      searchTags: Object.freeze(searchTags),
      tableData: [],
      tableLoading: true
    }
  },
  created() {
    this.initList()
    this.getPackageTypes()
    this.getriskLevelList()
  },
  methods: {
    async initList() {
      const { location } = this.$route.query
      const res = await getHoldRatioList(this.$clearNull({ ...this.listQuery, ...this.infoForm, location }))
      this.tableData = res.data
      this.total = res.total
      this.tableLoading = false
    },
    doSearch() {
      this.listQuery.page = 1
      this.initList()
    },
    onChangePage(page) {
      this.listQuery = page
      this.initList()
    },
    jumpToDetail(row, days) {
      this.$store.dispatch('jumpHoldRateRoute/setParmas', {
        location: row.location,
        customer: row.customer,
        packagingFormCode: row.packagingFormCode,
        productName: row.productName,
        processFlow: row.processFlow,
        processSpecifictionNo: row.processSpecifictionNo,
        startDate: pickTime(days)[0]
      }).then(() => {
        this.$router.push('holdRateDetail')
      })
    },
    async getPackageTypes() {
      const res = await getPackageTypeList()
      this.$set(this.selectList, 'packagingFormCode', res.data)
    },
    async getriskLevelList() {
      const res = await getriskLevel({ name: 'RiskLevel' })
      this.$set(this.selectList, 'riskRaito', res.data)
    }
  }
}
</script>
<style lang="scss" scoped>
@import "~@/assets/styles/defaultStyle.scss";
::v-deep .el-row:nth-child(1) {
  padding-bottom: 0;
}
::v-deep .el-form {
  padding-top: 10px;
}
.upload-btn{
  margin: 0 10px;
}
</style>
